<template>
	<view class="conter">
		<uni-nav-bar id="nav-bar" :background-color="navClor" :fixed="true" shadow  status-bar title="中医数字" :border="false":shadow="false" />
		<view class="ming">
			<image class='tx' src="../../static/txiang.png"></image>
			<view class="ming_right">
				<view class="ming_right_title">
					<view>苏佳闻</view>
					<image src="../../static/hg.png" mode=""></image>
				</view>
				<view class="ming_right_ry">
					<view>中国当代名医创始人</view>
					<view>央视数字频道主持人</view>
				</view>
				<view class="ming_right_img">
					<view class="ming_right_address">
						<image src="../../static/dizhiguanli.png" mode=""></image>
						<view>北京市朝阳区北苑路2号</view>
					</view>
					<view class="ming_right_address">
						<image src="../../static/dianhua.png" mode=""></image>
						<view>18612234387</view>
					</view>
				</view>

			</view>
		</view>
		<view class="conter_box">
			<view class="conter_box_top">
				<image @click="consultationClick" src="../../static/aiwz.png"></image>
				<image @click="dialogueClick" src="../../static/aidh.png"></image>
				<image @click="aicloneClick"src="../../static/cjmp.png"></image>
			</view>
			<view class="conter_box_bom">
				<view class="bom_title">
					<view @click="bomTitleClick(item.id)" v-for=" item in bomTitle" :key="item.id"
						:class="[bomTitleChange === item.id ? 'bom_title_change' : 'bom_title_item']">{{item.text}}
					</view>
				</view>
				<view class="bom_video">
					<view class="bom_video_box" v-for="item in bomVideoList" :key="item.id">
						<video class="video_box"></video>
						<view class="video_txt" v-text="item.txt"></view>
						<view class="video_img">
							<image src="../../static/hx.png" mode=""></image>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "中医数字",
				bomTitle: [{
					id: 0,
					text: "视频报道"
				}, {
					id: 1,
					text: "媒体报道"
				}],
				bomTitleChange: 0,
				bomVideoList: [{
					id: 0,
					txt: "中医数字中医数字中医数字中中医数字中医数字中医数字中医数字中医数字中医数字医数字中医数字中医数字中医数字中医数字123"
				}, {
					id: 1,
					txt: "中医数字中医数字中医数字中医数字"
				}, {
					id: 2,
					txt: "中医数字中医数字中医数字中医数字"
				}, {
					id: 3,
					txt: "中医数字中医数字中医数字中医数字"
				}, {
					id: 4,
					txt: "中医数字中医数字中医数字中医数字"
				}],
				// statusBarHeight: 120,
				navClor: "rgba(255, 255, 255, 0)"
			}
		},
		methods: {
			// 切换底部标题
			bomTitleClick(id) {
				this.bomTitleChange = id
			},
			// 跳转ai对话
			dialogueClick() {
				uni.navigateTo({
					url: '/pages/aidialogue/aidialogue'
				})
			},
			// 跳转智能问诊
			consultationClick() {
				uni.navigateTo({
					url: '/pages/consultation/consultation'
				})
			},
			aicloneClick(){
				uni.switchTab({
					url: '/pages/aiclone/aiclone'
				})
				
			}

		},
		// onLoad() {
		// 	let height = uni.getSystemInfoSync().statusBarHeight //状态栏高度
		// 	let heigths = uni.getMenuButtonBoundingClientRect().height
		// 	let statusHeight = height + heigths
		// 	console.log(statusHeight);
		// 	this.statusBarHeight = statusHeight
		// },

		onPageScroll: function(e) {
			if (e.scrollTop > 1) {
				this.navClor = 'rgba(255, 255, 255, 1)'
			}else{
				this.navClor = 'rgba(255, 255, 255, 0)'
			}
		}
	}
</script>

<style lang="scss">
	.conter {
		background-image: url("https://a1.qpic.cn/psc?/V12obLfG48bPoN/TmEUgtj9EK6.7V8ajmQrELQEdpWFggBvaieRar6Xa4DOxEGpaDeohRAvM62gkDhnick*qTVD1iFmL*K8cKoBr5bs5fwtKHgPAHDPQAlb5ig!/b&ek=1&kp=1&pt=0&bo=0ALgBdAC4AUDJwI!&tl=1&vuin=2664244587&tm=1734156000&dis_t=1734158548&dis_k=970bc0677d7ee2e1f4977efe3086caec&sce=60-2-2&rf=viewer_4");
		width: 100vw;
		height: 100vh;

		// background-color: #e3faf8;
		// .uni-navbar__placeholder {
		// 	display: none
		// }

		.title {
			height: 100rpx;
			font-family: FZLTCHK;
			font-weight: bold;
			font-size: 38rpx;
			color: #101011;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.ming {
			height: 258rpx;
			padding: 60rpx 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 70rpx;

			.tx {
				width: 241rpx;
				height: 258rpx;
				background: linear-gradient(0deg, #4FACFE 0%, #00F2FE 100%);
				border-radius: 25rpx;
				border: 0px solid #93F2D5;
			}

			.ming_right {
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				width: calc(100% - 314rpx);

				.ming_right_title {
					width: 100%;
					height: 60rpx;
					font-family: AlibabaPuHuiTiB;
					font-weight: 400;
					font-size: 48rpx;
					color: #101011;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					gap: 18rpx;

					>image {
						width: 42rpx;
						height: 43rpx;
					}
				}

				.ming_right_ry {
					width: 100%;

					>view {
						font-family: AlibabaPuHuiTiR;
						font-weight: 400;
						font-size: 27rpx;
						color: #101011;
						line-height: 43rpx;
					}

				}

				.ming_right_img {
					width: 100%;

					.ming_right_address {
						font-family: AlibabaPuHuiTiR;
						font-weight: 400;
						font-size: 23rpx;
						color: #101011;
						line-height: 37rpx;
						opacity: 0.65;
						display: flex;
						align-items: center;
						gap: 6rpx;

						>image {
							width: 26rpx;
							height: 26rpx;
						}
					}
				}

			}
		}

		.conter_box {
			display: flex;
			flex-wrap: wrap;
			gap: 6rpx;

			.conter_box_top {
				width: 100%;
				background-color: #fff;
				background: #FFFFFF;
				box-shadow: -10rpx -11rpx 26rpx 4rpx rgba(127, 192, 176, 0.11);
				border-radius: 47rpx 47rpx 0rpx 0rpx;
				padding: 65rpx 0 17rpx;
				display: flex;
				justify-content: center;

				>image {
					width: 230rpx;
					height: 222rpx;
				}
			}

			.conter_box_bom {
				width: 100%;
				padding: 42rpx 42rpx 0;
				background-color: #FFFFFF;

				.bom_title {
					width: 100%;
					height: 104rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.bom_title_item {
						width: 47%;
						height: 75rpx;
						border-radius: 14rpx;
						background: #EBF1FC;
						line-height: 75rpx;
						font-family: AlibabaPuHuiTiR;
						font-weight: 400;
						font-size: 35rpx;
						color: #999FAA;
						text-align: center;
					}

					.bom_title_change {
						width: 320rpx;
						height: 75rpx;
						border-radius: 14rpx;
						background: #4AD8E0;
						line-height: 75rpx;
						font-family: AlibabaPuHuiTiR;
						font-weight: 400;
						font-size: 35rpx;
						color: #FFFFFF;
						text-align: center;

					}

				}

				.bom_video {
					display: flex;
					flex-wrap: wrap;
					flex-direction: row;
					justify-content: space-between;
					gap: 30rpx;
					padding-top: 40rpx;

					.bom_video_box {
						width: 47%;
						height: 370rpx;
						box-shadow: 4rpx 10rpx 39rpx 6rpx rgba(161, 161, 161, 0.19);
						border-radius: 17rpx;
						background: #FFFFFF;

						.video_box {
							width: 100%;
							height: 61%;
							border-radius: 17rpx 17rpx 0 0;
						}

						.video_txt {
							padding: 0 32rpx;
							height: 75rpx;
							font-family: AlibabaPuHuiTiR;
							font-weight: 400;
							font-size: 25rpx;
							color: #000000;
							line-height: 38rpx;
							// 设置两行后换行
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.video_img {
							height: calc(38% - 75rpx);
							display: flex;
							align-items: center;
							justify-content: flex-end;

							>image {
								width: 24rpx;
								height: 21rpx;
								padding-right: 32rpx;
							}
						}

					}
				}

			}

		}
	}
</style>